<template>
  <div class="ueditor">
      <el-table :data="dataForm.list" border fit highlight-current-row>

        <el-table-column align="center" label="ID" prop="id" />

        <el-table-column align="center" min-width="100" label="标题" prop="title" />

        <el-table-column align="center" label="添加时间" prop="updateTime" />

        <el-table-column align="center" label="操作" width="200" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button  v-permission="['POST /admin/xconfig/updateLitemallConfig']" type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 添加或修改对话框 -->
      <el-dialog :append-to-body="true" title="编辑" :visible.sync="show" >
        <el-form ref="goods" :model="goods">
          <el-form-item>
            <div id="editorice"></div>
            <!-- <div>
              <VueUeditorWrap
                v-model="nav"
                :config="editorConfig"
                @ready="ready"
              />
            </div> -->
<!--            <editor v-model="nav" :init="editorInit" />-->
          </el-form-item>

        </el-form>
        <div class="op-container">
          <el-button @click="handleCancel">取消</el-button>
          <el-button type="primary" @click="handleEdit">保存</el-button>
        </div>
      </el-dialog>
<!--    <div>-->
<!--      <VueUeditorWrap-->
<!--        v-model="message"-->
<!--        :config="editorConfig"-->
<!--        @ready="ready"-->
<!--      />-->
<!--    </div>-->
  </div>
</template>
<script>
import VueUeditorWrap from 'vue-ueditor-wrap'
// import evtHub from '@/common/eventHub.js'
import { footList,footEdit, editfoot } from '@/api/config'
// import Editor from '@tinymce/tinymce-vue'
import { createStorage, uploadPath } from '@/api/storage'
export default {
  name: 'ConfigFoot',
  // components: { Editor},
  components: { VueUeditorWrap },
  data() {
    return {
      dataForm: [],
      show: false,
      nav: '',
      id: '',
      // evtHub: evtHub,
      message:'',
      editorConfig: {
        // 编辑器不自动被内容撑高
        autoHeightEnabled: false,
        // 初始容器高度
        initialFrameHeight: 300,
        // 初始容器宽度
        initialFrameWidth: '100%',
        UEDITOR_HOME_URL: '/UEditor/',
        // 上传文件接口, 报错属于正常，若需要验 证可使用(也是盗大神的)http://35.201.165.105:8000/controller.php
        // 调试完毕打包上线则切换回/static/UEditor/php/controller.php即可，不用做其他处理
        // serverUrl: '/static/UEditor/php/controller.php',
        serverUrl:"http://xfzw.qianyingapp.com/shop_admin/admin/storage/create"
      },
      goods:{},
      editorbox:null

      // editorInit: {
      //   language: 'zh_CN',
      //   height: '400px',
      //   convert_urls: false,
      //   plugins: [
      //     'advlist anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools importcss insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount'
      //   ],
      //   toolbar: [
      //     'searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript code codesample',
      //     'hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen'
      //   ],
      //   images_upload_handler: function(blobInfo, success, failure) {
      //     const formData = new FormData()
      //     formData.append('file', blobInfo.blob())
      //     createStorage(formData)
      //       .then((res) => {
      //         success(res.data.data.url)
      //       })
      //       .catch(() => {
      //         failure('上傳失敗，請重新上傳')
      //       })
      //   }
    }
  },
  mounted() {
    this.list()
    // this.message = this.content;
  },
  methods: {
    ready(editorInstance) {
      // 这里可以拿到ueditor的实例，比如editorInstance.getContent()就可以拿到编辑器的html内容
      // this.evtHub.$emit('editor.data', editorInstance);
      console.log(`编辑器实例${editorInstance.key}: `, editorInstance)
    },
    createEditor(){
      this.editorbox = null
      setTimeout(() => {
        this.editorbox = new ice.editor("editorice");
        if(this.nav == '' || this.nav == null || this.nav == undefined){

        }else{
          this.editorbox.setValue(this.nav);
        }
        //第二步：配置图片或附件上传提交表单的路径
        this.editorbox.uploadUrl="http://www.hometasty.info/demo/up.php";
      }, 1000);
    },
    handleUpdate(row) {
      this.show = true
      const id = row.id
      this.id = id
      footEdit(id).then(response => {
          console.log(response)
          this.nav = response.data.data.contont
          this.createEditor()
      })
      // this.$router.push({ path: '/config/foot_edit', query: { id: row.id }})
    },
    handleEdit() {
      var that = this
      this.nav = this.editorbox.getHTML()
      editfoot({ id: this.id, contont: this.nav }).then(response => {
        if (response.data.errno == 0) {
          this.$message({
            message: '修改成功',
            type: 'success'
          })
          this.show = false
        }
      })
    },
    handleCancel(){
       this.show = false
    },
    list() {
      footList().then(response => {
        this.dataForm = response.data.data
      })
    }
  }
}
</script>
<style>
.ueditor>>>.el-dialog__wrapper{
  z-index: -1111!important;
}
.thisDialog{
  z-index:200 !important;
}
.app-container >>> .v-modal{
  z-index:199 !important;
}
</style>
